/**
 * title: useEffect
 */
import { useEffect, useState } from 'react';
import { Link } from 'umi';

export default () => {
  const [count, setCount] = useState(() => {
    return 3;
  });
  const [width, setWidth] = useState(document.body.clientWidth);
  //函数
  const getWidth = () => {
    setWidth(document.body.clientWidth);
  };
  //第一次渲染 组件被销毁
  useEffect(() => {
    //componentDidMount
    console.log(2);
    window.addEventListener('resize', getWidth, false);
    return () => {
      //componentWillUnmount
      window.removeEventListener('resize', getWidth, false);
    };
  }, []);
  //第一次渲染 | count变动时执行
  useEffect(() => {
    console.log(1);
    document.title = count;
  }, [count]);
  //第一次渲染 | count变动时执行
  useEffect(() => {
    console.log('第一次调用');
  }, []);

  return (
    <div>
      <span>{count}</span>
      <button onClick={() => setCount(count + 1)}>+1</button>
      <br />
      页面宽度：{width}
      <br />
      <A3_1 a={count} />
    </div>
  );
};

// 子组件
const A3_1 = props => {
  const [count, setCount] = useState(() => props.a);
  return (
    <div>
      a3-{count}
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
};
